<template>
  <swiper  class="swiper" ref="swiper" :options="swiperOption" @click="info">
<swiper-slide class="item" v-for="(item,index) in imgArr" :key="index" :style="item.img"  > 

</swiper-slide>

    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import LightBox from 'vue-it-bigger'
export default {
  components: {  LightBox,},

  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        direction: "horizontal",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
              window.innerWidth <= 960 ? "vertical" : "horizontal"
            );
          }
        }
      },
      imgArr: [
        {
          // video:{
          //     url:"http://oss.pinju.com/ui/lc.mp4"
          // },
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/6.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../assets/images/example/7.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        }
      ]
    };
  },
  methods: {
    info() {
      console.log("ada");
      this.$router.push({ path: "/preview" });
    }
  }
};
</script>

<style scoped>
.swiper {
  margin: 0 60px;
}
.item {
  height: 230px;
  border-radius: 15px;
}
.item:nth-child(2){
  background-image: url("../assets/images/player.png") no-repeat;
  z-index: 5;
}
@media (max-width: 960px) {
  .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
  }

  .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
  }
}
</style>